<template>
  <div class="about">
    <div style="width:100%;position: relative;top: 25px;height: 530px;overflow: hidden;">
      <el-carousel :interval="3000" type="card" arrow="always" height="500px" style="position: absolute;width: 150%;margin-left: -25%;">
        <el-carousel-item v-for="(image) in images" :key="image.id">
          <img :src="image.userImg" height="100%" width="100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="width: 82.5%; margin: 0 auto;margin-top: 60px">
      <el-container>
        <el-main>

          <h3>作者推荐</h3>
          <el-empty v-if="songs.length === 0" :image-size="200"></el-empty>
          <div  v-for="(song, id) in songs" :key="id">
            <el-card v-if="song.imgId&& typeof song.imgId === 'string' && song.imgId.startsWith('http')" :body-style="{ padding: '0px' }" class="box-card zuozhe"
            :style="{ backgroundImage: 'url(' + song.imgId + ')' }">
              <div style="position: absolute;bottom: 0px;right:5%;color: aliceblue;">
              <h2>{{ song.name }}&nbsp;<i class="el-icon-video-play cursor" @click="play(song.musicId)"></i></h2>
              <p>{{ song.singer.name }}</p>
            </div>
          </el-card>
          <el-card v-else :body-style="{ padding: '0px' }" class="box-card zuozhe"
            :style="{ backgroundImage: 'url(' + userImg + (song.imgId ? song.imgId : '646f20c3af1c000058000a75') + ')' }">
              <div style="position: absolute;bottom: 0px;right:5%;color: aliceblue;">
              <h2>{{ song.name }}&nbsp;<i class="el-icon-video-play cursor" @click="play(song.musicId)"></i></h2>
              <p>{{ song.singer.name }}</p>
            </div>
          </el-card>
          </div>
          
          <el-button v-if="songs.length != 0 && !JXpageEnd" type="primary" :loading="JXBtn" @click="getJXMore">查看更多</el-button>
          <el-divider class="dd" v-if="JXpageEnd">已经到底了</el-divider>
        </el-main>

        <el-aside width="35%">
          <div>
            <h3>精选留言</h3>
            <el-empty v-if="comments.length ===0" :image-size="200"></el-empty>
            <el-card v-for="(comment, index) in comments" :key="index" class="box-card" style="width: 95%;">
              <span>
                <img :src="userImg + comment.user.userImg" width="40px" height="40px" alt=""
                  style="border-radius: 50%;border: 1px solid;" />
                <span>
                  <p style="color:#1a1818;padding: 0;margin: -50px 50px;">{{ comment.user.nickname }}</p>
                  <p style="color:#aaa;font-size: 12px;padding: 0;margin:60px 50px;">{{ comment.user.birthday | formatDate
                  }}</p>
                </span>

                <p style="width: 100%;margin-top:-40px;">
                  {{ comment.content }}
                </p>
              </span>
            </el-card>
            <el-button v-if="comments.length != 0 && !PLpageEnd" type="primary" :loading="PLBtn" @click="getPLMore">查看更多</el-button>
            <el-divider class="dd" v-if="PLpageEnd">已经到底了</el-divider>
          </div>
        </el-aside>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
/* 幻灯片样式 */
.el-carousel {
  margin: auto;
  width: 100%;
  border-radius: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 500px;
  text-align: center;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-aside {
  margin-top: 18px;
}

/* 卡片样式 */
.box-card {
  width: 95%;
  background-color: #f7f7f8;
  color: #000;
  margin-top: 40px;
}

/* 按钮样式 */
.el-button {
  margin-top: 20px;
  width: 95%;
  border: none;
}

.el-button:hover {
  transition: 0.5s;
  background-color: #07895e;
}

.dd {
  width: 93% !important;
  margin: 30px 0 !important;
}

.zuozhe {
  position: relative;
  background-position-x: center;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.cursor {
  color: #ccc;
  cursor: pointer;
}

.cursor:hover {
  transition: 0.3s;
  color: #fff;
}
</style>

<script>
import infoApi from '@/api/infoApi';
import manageApi from '@/api/manageApi';
export default {
  name: 'index',
  data() {
    return {
      // 所有幻灯片
      images: [

      ],
      // 所有推荐歌曲
      songs: [],
      //精选歌曲分页
      songPageSize: 2,
      songPage: 0,
      JXpageEnd: false,
      JXBtn: false,
      //所有精选评论
      comments: [],
      userImg: "/api/getImg/",
      userMusic: "/api/getMusic/",
      //精选评论分页数据
      commentPageSize: 3,
      commentPage: 0,
      commentTap:true,
      PLpageEnd: false,
      PLBtn: false,
    };
  },
  //创建后获得标题
  created() {
    this.setPageTitle();
  },
  methods: {
    getData(){
      this.getComments();
      this.getSongs();
    },
    getSongs() {
      this.JXBtn = true
      //获得所有精选歌曲
      manageApi.getSongs({
        params: {
          page: this.songPage,
          size: this.songPageSize,
        }
      }).then(response => {
        if (this.songPage + 1 === response.data.totalPages) {
          this.JXpageEnd = true;
        }
        response.data.content.forEach(element => {
          this.songs.push(element)
        });
        this.JXBtn = false;
      })
    },
    getJXMore() {
      this.songPage++;
      this.getSongs();
    },
    getComments(pagesize){
      if(pagesize===2){
        this.commentPageSize =pagesize;
      }
      this.PLBtn = true
      // 获取精选评论列表
      manageApi.getCommentt({
        params: {
          page: this.commentPage,
          size: this.commentPageSize,
        }
      }).then(response => {
        if (this.commentPage + 1 === response.data.totalPages) {
          this.PLpageEnd = true;
        }
        response.data.content.forEach(element => {
          this.comments.push(element)
          if(this.commentPage ===1 && this.commentTap){
            this.comments.pop(element);
            this.commentTap=false;
          }
        });

        this.PLBtn = false;
      })
    },
    getPLMore() {
      this.commentPage++;
      this.getComments(2);
    },
    setPageTitle() {
      document.title = this.$route.meta.title || 'My App';
    },
    play(id) {
      this.$emit('childClick', id);
    }
  },
  //加载完成后执行
  mounted() {
    this.getData();
    //获得所有幻灯片
    manageApi.getSlide().then(response => {
      this.images = response.data;
      localStorage.setItem('image', JSON.stringify(response.data));

    });
  },
  //过滤日期
  filters: {
    formatDate(value) {
      if (value != undefined) {
        //将T后面的分割
        return value.split('T')[0]
      }
    }
  }
};
</script>
  